<nz-layout class="site">
  <nz-header>
    <app-header (toggle)="toggleCollapsed()"></app-header>
  </nz-header>

  <nz-layout>
    <nz-sider [(nzCollapsed)]="isCollapsed" [nzCollapsedWidth]="0">
      <ul nz-menu [nzMode]="'inline'" [nzTheme]="'dark'" style="max-width: 200px;height: 100%">
        <li nz-submenu>
          <span title>
            <i class="anticon anticon-user"></i>
            <span>subnav 1</span>
          </span>
          <ul>
            <li nz-menu-item>option1</li>
            <li nz-menu-item>option2</li>
            <li nz-menu-item>option3</li>
            <li nz-menu-item>option4</li>
          </ul>

        </li>
        <li nz-submenu>
          <span title><i class="anticon anticon-laptop"></i>
          <span>subnav 2</span>
          </span>
          <ul>
            <li nz-menu-item>option5</li>
            <li nz-menu-item>option6</li>
            <li nz-menu-item>option7</li>
            <li nz-menu-item>option8</li>
          </ul>
        </li>
        <li nz-submenu>
          <span title>
            <i class="anticon anticon-notification"></i>
            <span>subnav 3</span>
          </span>
          <ul>
            <li nz-menu-item>option9</li>
            <li nz-menu-item>option10</li>
            <li nz-menu-item>option11</li>
            <li nz-menu-item>option12</li>
          </ul>
        </li>
      </ul>
    </nz-sider>
    <nz-layout style="padding:0 24px 24px">
      <nz-breadcrumb style="margin:16px 0;">
        <nz-breadcrumb-item>Home</nz-breadcrumb-item>
        <nz-breadcrumb-item>List</nz-breadcrumb-item>
        <nz-breadcrumb-item>App</nz-breadcrumb-item>
      </nz-breadcrumb>
      <nz-content style="background:#fff; padding: 24px; min-height: 280px;">
        <router-outlet></router-outlet>
      </nz-content>
    </nz-layout>
  </nz-layout>

  <app-footer></app-footer>
</nz-layout>
